<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-23 13:35
 * Desc: 复制链接组件
 */
-->
<template>
  <view class="copy-pop">
    <zm-popup
      v-model="currentValue"
      mode="bottom"
      :round="10"
      :closeable="false"
      :mask-close-able="false"
    >
      <view
        class="copy-pop__content"
        :style="{ 'padding-bottom': paddingBottom + 'rpx' }"
      >
        <view class="flex mr30 ml30 mb35">
          <view class="flex-1">
            <text class="fc3 fs28 b mr15">请选择要复制的链接类型</text>
            <text class="fc8 fs26">链接有效期30天</text>
          </view>
          <u-icon
            name="close"
            color="#C0C0C0"
            size="18"
            @click="onClose"
          ></u-icon>
        </view>
        <view class="mr35 ml35">
          <u-radio-group v-model="checkboxValue1" placement="row">
            <view
              class="copy-pop__check"
              :class="[
                { 'copy-pop__check--active': item.key === checkboxValue1 }
              ]"
              v-for="item in list"
              :key="item.key"
            >
              <view class="fs28 mb15 b" style="color: #3bc5d2">{{
                item.title
              }}</view>
              <view class="fc8 fs24">{{ item.subTitle }}</view>
              <view class="copy-pop__img">
                <image
                  :src="item.img"
                  style="width: 100%; height: 100%"
                ></image>
              </view>
              <view>
                <u-radio active-color="#3DCFEC" :name="item.key" />
              </view>
            </view>
          </u-radio-group>
        </view>
        <view class="flex-a-m mt50">
          <view class="copy-pop__btn copy-pop__close" @click="onClose"
            >取消</view
          >
          <view class="copy-pop__btn copy-pop__confirm" @click="onConfirm"
            >确定</view
          >
        </view>
      </view>
    </zm-popup>
  </view>
</template>
<script>
  import ZmPopup from '@/commons/ZmPopup'

  import { locShare } from '@/utils/locStore/data'
  export default {
    name: 'copy-pop',
    components: { ZmPopup },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      paddingBottom: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        checkboxValue1: '',
        longUrl: '',
        shortUrl: '',
        list: [
          {
            title: '微信内部链接',
            subTitle: '(会话、朋友圈等)',
            img: 'https://public-oss-file.zmaxfilm.com/applet/img/my/wxInner-img.png',
            key: 'innner'
          },
          {
            title: '微信外部链接',
            subTitle: '(短信、网页、邮件等)',
            img: 'https://public-oss-file.zmaxfilm.com/applet/img/my/wxOuter-img.png',
            key: 'outer'
          }
        ]
      }
    },
    created() {
      this.init()
    },
    computed: {
      currentValue: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    methods: {
      init() {
        this.getUrlLink()
        this.getShortLink()
      },
      onClose() {
        this.$emit('input', false)
      },
      onConfirm() {
        if (this.checkboxValue1) {
          if (this.checkboxValue1 === 'outer') {
            uni.setClipboardData({
              data: this.longUrl.url
            })
          } else {
            uni.setClipboardData({
              data: this.shortUrl.url
            })
          }
          this.$msg.toast('复制链接成功!', 'success')
          console.log(this.longUrl, '长链')
          console.log(this.shortUrl, '短链')
          this.onClose()
        } else {
          this.$msg.toast('请选择要复制的链接类型')
        }
      },
      getUrlLink() {
        const obj = locShare.get()
        const { jumpUrl, shareQuery } = this.$auth.getShareInfo(obj)
        uni.$api.public
          .getUrlLink({
            path: jumpUrl,
            query: `sq=${shareQuery}`,
            expire_time: new Date().getTime() + 1000 * 60 * 60 * 24
          })
          .then((res) => {
            console.log(res)
            this.longUrl = res
          })
      },
      getShortLink() {
        const obj = locShare.get()
        const { jumpUrl, shareQuery } = this.$auth.getShareInfo(obj)
        uni.$api.public
          .getUrlLink({
            page_url: `${jumpUrl}?sq=${shareQuery}`,
            page_title: '页面标题'
          })
          .then((res) => {
            console.log(res)
            this.shortUrl = res
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .copy-pop {
    &__content {
      padding: 43rpx 0rpx 55rpx;
    }
    &__check {
      margin-right: 16rpx;
      padding: 23rpx 18rpx 25rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border: 2rpx solid #d4d4d4;
      border-radius: 18rpx;
    }
    &__check:nth-last-of-type(1) {
      margin-right: 0;
    }
    &__check--active {
      border: 2rpx solid #3bc5d2;
    }
    &__img {
      margin: 22rpx 0 28rpx;
      width: 294rpx;
      height: 214rpx;
    }
    &__btn {
      width: 344rpx;
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 18rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 400;
      text-align: center;
    }
    &__close {
      background: #ffffff;
      border: 2rpx solid #3bc5d2;
      color: #3bc5d2;
    }
    &__confirm {
      background: linear-gradient(to right, #55baff, #23e6d8);
      color: #ffff;
    }
  }
</style>
